<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/echarts/3.8.2/echarts.js"></script>
    <style>
        .chart {
            width: 1000px;
            height: 700px;
        }

        .tabs {
            display: flex;
            justify-content: center;
            width: 1000px;
        }

        .tabs nav {
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: #333;
            transition: all .3s linear;
        }

        .tabs nav+nav {
            margin-left: 10px;
        }

        .tabs .active {
            background-color: red;
            width: 30px;
        }
    </style>
</head>

<body>
    <div class="chart">

    </div>
    <div class="tabs">

    </div>
</body>
<script>
    let resData = [
        { name: 'legend1', data: [120, 132, 101, 134, 90, 230, 210] },
        { name: 'legend2', data: [220, 132, 121, 134, 90, 230, 210] },
        { name: 'legend3', data: [320, 132, 131, 134, 90, 230, 210] },
        { name: 'legend4', data: [420, 132, 141, 134, 90, 230, 210] },
        { name: 'legend5', data: [520, 132, 151, 134, 90, 230, 210] },
    ]
    let active = '';
    let tabs = [];
    tabs = resData.map((v) => v.name);
    active = tabs[0];

    const initTabsHTML = () => {
        let tabsHTML = ``;
        tabs.map((v) => {
            let tabItem = `<nav data-tab='${v}'></nav>`;
            if (v == active) {
                tabItem = `<nav data-tab='${v}' class='active'></nav>`
            }
            tabsHTML += tabItem;
        })
        $('.tabs').html(tabsHTML)
    }
    initTabsHTML();
    requestAnimationFrame(() => {
        $('.tabs>nav').click((e) => {
            $(".tabs>nav").attr('class', '');
            e.target.setAttribute('class', 'active')
            active = e.target.getAttribute('data-tab');
            initChart();
        })
    })

    const initChart = () => {
        let mapDom = document.querySelector('.chart');
        let myChart = echarts.init(mapDom);
        myChart.clear();
        let data = resData;
        let legends = data.filter((v) => {
            if (v.name == active) {
                return {
                    name: v.name
                }
            }
        })
        let seriesData = data.map((v) => {
            let lineStyle = {
                opacity: .3,
            }
            let label = {
                show: false,
                color: "#333",
                fontSize: 15,
            }
            if (v.name == active) {
                lineStyle.opacity = 1;
                label.show = true;
            }
            return {
                type: 'line',
                smooth: true,
                name: v.name,
                data: v.data,
                lineStyle: {
                    normal: lineStyle
                },
                itemStyle: {
                    normal: {
                        label:label
                    }
                },

            }
        })
        let option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legends,
                selectedMode: false,        //这里禁止点击；需要的自己写事件使用filter动态setOption
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: seriesData
        };
        myChart.setOption(option);
    }
    initChart();

    let k = 0;
    setInterval(function(){
        k++;
        if(k > tabs.length-1){
            k = 0;
        }
        active = tabs[k];
        initChart();
        $('.tabs>nav').attr('class','');
        $('.tabs>nav').eq(k).attr('class','active');
    },5000)
</script>

</html>